<div class="equipment-monitoring">
  <div class="equipment-monitoring-head">
    <div class="head-left">
      <a [routerLink]="['/outer/project-type']" class="breadcrumb">
        项目
      </a>
      <i nz-icon type="right" theme="outline"></i>
      <a (click)="routeToSurvey()" class="breadcrumb">
        {{projectInfo.name}}
      </a>
      <b>
        <i nz-icon type="right" theme="outline"></i>
        起重机械
      </b>
    </div>
  </div>
  <div class="equipment-monitoring-body">
    <div class="equipment-monitoring-body-card-title">
      当前 - 全部设备
    </div>
    <div nz-row nzGutter="16" class="equipment-monitoring-body-card-content">
      <div *ngFor="let item of equipmentList" class="equipment-item"
        (click)="QueryMachinesDetailsById(item)" nz-col nzSpan="6">
        <div class="equipment-item-img">
          <img *ngIf="item.type === 2" src="../../../../../assets/images/project/tadiao.png" alt="">
          <img *ngIf="item.type === 1" src="../../../../../assets/images/project/shengjiangji.png" alt="">
        </div>
        <div class="equipment-item-info">
          <div>{{item.blackBoxId}}</div>
          <!-- <div>{{item.creationTime | date:'yyyy-MM-dd'}}</div> -->
          <div>类型：{{item.type === 1 ? '升降机' : '塔吊'}}</div>
          <div>黑匣子：{{item.status === 1 ? '已安装' : '未安装'}}</div>
        </div>
      </div>
    </div>
    <div style="text-align: center;margin-top: 10px">
      <nz-pagination [nzPageSize]="projectPageInfo.maxResultCount" [nzPageIndex]="projectPageInfo.nzPageIndex + 1"
        [nzTotal]="projectPageInfo.nzTotal" (nzPageIndexChange)="pageChange($event)" nzShowQuickJumper
        [nzShowTotal]="totalTemplate"></nz-pagination>
      <ng-template #totalTemplate let-total>
        共{{projectPageInfo.nzTotal}}条
      </ng-template>
    </div>
  </div>
</div>

<!-- 设备详情 -->
<nz-modal class="equipment-modal" [(nzVisible)]="isEquipmentVisible" [nzTitle]="modalTitle"
  (nzOnCancel)="isEquipmentVisible=false" [nzFooter]="null" nzWidth="800">
  <div class="equipment-modal-top-info">
    <span>数据更新时间：{{equipmentDetailInfo.creationTime | date:'yyyy-MM-dd hh:mm:ss'}}</span>
    <span>今日报警次数: -</span>
    <span>今日预警次数: -</span>
  </div>
  <div class="equipment-modal-echart-top">
    <div echarts [options]="echartsTopOption" style="height: 90%;width: 100%;min-height: 180px"></div>
  </div>
  <div class="equipment-modal-mid-info">
    <div class="equipment-modal-title">基本信息</div>
    <div class="equipment-modal-contain" nz-row nzGutter="16">
      <div class="equipment-modal-mid-item" nz-col nzSpan="8">设备编号：{{equipmentDetailInfo.blackBoxId}}</div>
      <div class="equipment-modal-mid-item" nz-col nzSpan="8">规格型号：{{equipmentDetailInfo.manufacturer}}</div>
      <div class="equipment-modal-mid-item" nz-col nzSpan="8">生产厂家：{{equipmentDetailInfo.manufacturerAndDeviceType}}</div>
      <div class="equipment-modal-mid-item" nz-col nzSpan="8">X坐标：{{equipmentDetailInfo.coordinateX}}</div>
      <div class="equipment-modal-mid-item" nz-col nzSpan="8">Y坐标：{{equipmentDetailInfo.coordinateY}}</div>
    </div>
  </div>
  <div class="equipment-modal-mid-info">
    <div class="equipment-modal-title">实时数据</div>
    <div class="equipment-modal-contain" nz-row nzGutter="16">
      <div class="equipment-modal-mid-item" nz-col nzSpan="8">塔身高度：{{equipmentDetailInfo.height}}</div>
      <div class="equipment-modal-mid-item" nz-col nzSpan="8">臂长：-</div>
      <div class="equipment-modal-mid-item" nz-col nzSpan="8">尾臂长：-</div>
      <div class="equipment-modal-mid-item" nz-col nzSpan="8">重量：{{equipmentDetailInfo.elevatingCapacity}}吨</div>
      <div class="equipment-modal-mid-item" nz-col nzSpan="8">力矩百分比：{{equipmentDetailInfo.torquePercentage}}</div>
      <div class="equipment-modal-mid-item" nz-col nzSpan="8">幅度：{{equipmentDetailInfo.range}}</div>
      <div class="equipment-modal-mid-item" nz-col nzSpan="8">高度：{{equipmentDetailInfo.height}}</div>
      <div class="equipment-modal-mid-item" nz-col nzSpan="8">风级：{{equipmentDetailInfo.windSpeed}}米/秒</div>
      <div class="equipment-modal-mid-item" nz-col nzSpan="8">回转：{{equipmentDetailInfo.rotation}}</div>
    </div>
  </div>
  <div class="equipment-modal-bottom">
    <div class="equipment-modal-pointer">
      <img [ngStyle]="{'transform': pointerDeg}" src="../../../../../assets/images/project/pointer.png" alt="">
      <span class="equipment-modal-pointer-0">0</span>
      <span class="equipment-modal-pointer-180">180</span>
      <div class="equipment-modal-pointer-huixuan">回旋：{{equipmentDetailInfo.rotation}}°</div>
    </div>
    <div echarts [options]="echartsBottomOption" style="height: 90%;width: 60%;height: 110px"></div>
  </div>
</nz-modal>